<template>
  <view class="container">
    <header @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view>意见反馈</view>
    </header>

    <section>
      <view class="sect-box">
        <view class="sect-title">反馈原因</view>
        <view class="sect-tabList">
          <view :class="[type == item.title ? 'tab-item tab-item-active' : 'tab-item']"  v-for="(item,index) in tabList" :key="index"
            @click="type = item.title">
            {{ item.title }}
          </view>
        </view>
        <view class="sect-title">问题说明</view>
        <textarea placeholder='请输入问题说明' v-model="content" maxlength="100"></textarea>
        <view class="sect-camera">
          <u-upload @afterRead="afterRead" :maxCount="1">
            <image class="card-img" :src='images' alt="" v-if="images != ''" mode='aspectFit|aspectFill|widthFix' />
            <view class="card-upload" v-else>
              <u-icon name="camera" size="30"></u-icon>
              <text>添加照片</text>
            </view>
          </u-upload>
        </view>
      </view>
    </section>
    <footer>
      <button @click="handleSubmit">提交</button>
    </footer>
  </view>
</template>
<script>
import {getUserInfo} from '@/common/auth';
export default {
  data() {
    return {
      tabList: [
        { id: 1, title: '产品建议' },
        { id: 2, title: '活动反馈' },
        { id: 3, title: '系统BUG' },
        { id: 4, title: '优化建议' },
      ],

      type: '优化建议',
      content: '',
      images: '',
    }
  },

  methods: {
    //图片上传 
    async afterRead(event) {
      let result = await this.$tools.uploadImage(event.file.url)
      this.images = result.data;
    },
    //提交
    handleSubmit() {
      const { content, type, images } = this;
      let info = getUserInfo()
      const param = {
        content,
        type,
        images,
        userId: info.userId
      };
      if(content == '') return this.$toast('请填写问题说明')
      this.$request.feedbackSubmit(param).then(res => {
        if(res.code == 200 && res.isSuccess) {
          this.$toast('提交成功!')
          this.content = '';
          this.images = '';
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  overflow-y: hidden;
  color: #333;

  header {
    width: 100%;
    padding: 100rpx 24rpx 60rpx;
    border-radius: 0 0 40rpx 40rpx;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    font-size: 36rpx;
    font-family: 'PingFang SC-Bold';
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;

    image {
      width: 16rpx;
      height: 32rpx;
      display: block;
      margin-right: 6rpx;
    }
  }


  section {
    height: 100%;
    position: relative;
    top: -40rpx;
    padding: 0 24rpx;
    box-sizing: border-box;

    .sect-box {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 40rpx 40rpx 0 0;
      padding: 24rpx;
      padding-bottom: 150rpx;
      box-sizing: border-box;

      .sect-title {
        font-size: 32rpx;
        font-family: 'PingFang SC-Bold';
        margin-bottom: 24rpx;

      }

      .sect-tabList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 48rpx;

        .tab-item {
          width: 160rpx;
          height: 60rpx;
          background: #FAFAFA;
          border-radius: 30rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #666;
        }

        .tab-item-active {
          border: 1rpx solid #32B499;
          color: #32B499;
          background-color: #fff;
          box-sizing: border-box;
        }

      }

      textarea {
        width: 100%;
        height: 300rpx;
        background: #FAFAFA;
        border-radius: 8px;
        padding: 24rpx;
        font-size: 28rpx;
        box-sizing: border-box;
        margin-bottom: 24rpx;
      }
      .card-img {
          width: 160rpx;
          height: 160rpx;
          display: block;
          border-radius: 16rpx;
        }

      .card-upload {
        width: 140rpx;
        height: 140rpx;
        background: #FAFAFA;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  footer {
        width: 100%;
        height: 150rpx;
        background: #FFFFFF;
        box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(51, 51, 51, 0.1);
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        button {
          width: 90%;
          height: 80rpx;
          border-radius: 40rpx;
          font-size: 28rpx;
          font-family: 'PingFang SC-Medium';
          background-color: #32B499;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
}
</style>
